<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">消费管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户消费选择</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索 -->
      <el-form ref="CuisineFormRef" :model="CuisineForm" label-width="120px">
        <el-row>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="食物类型" prop="models">
              <el-select v-model="CuisineForm.models" placeholder="请选择菜品类型" style="width: 100%;">
                <el-option
                  v-for="(item, index) in CuisineModel"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 卡片 -->
      <el-row>
        <el-col :span="8" v-for="item in CuisineData" :key="item._id">
          <el-card :body-style="{ padding: '50px' }">
            <img :src="item.CuisineImg" class="image" style="width:250px;height:160px"/>
            <div style="padding: 14px;">
              <span>
                {{ item.models
                }}
                &nbsp&nbsp&nbsp&nbsp
                地址
                {{item.FoodAddress}}
                <i class="foodPrice">￥{{ item.CuisinePrice }}</i>
              </span>
              <p>生产时间：{{item.date | timeFilter}}</p>
              <div class="bottom clearfix">
                <el-button
                  type="warning"
                  size="mini"
                  style="float: right;"
                  @click="appointDialog(item)"
                >预约该菜品</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      :title="step === 'first' ? '套餐选择' : '预约时间选择'"
      :visible.sync="dialogVisible"
      :width="step === 'first' ? '70%' : '40%'"
      :before-close="handleClose"
    >
      <my-package v-if="step === 'first'" :tempType="tempType" @packageChange="packageChange"></my-package>
      <div v-else>
        <el-date-picker
          v-model="CuisineAppointTime"
           type="datetimerange"
          value-format="timestamp"
          range-separator="至"
          style="width: 100%;"
          start-placeholder="配送开始日期"
          end-placeholder="配送结束日期"
          
          disabled>
          </el-date-picker>
        <div style="margin-top: 10px;">
          <input type="checkbox" v-model="checkFlag" />
          <span>
            <el-link type="primary">《请勾选预约后餐品不退条款协议》</el-link>请先勾选同意此协议
          </span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div v-if="step === 'first'">
          <el-button @click="resetClick">取 消</el-button>
          <el-button @click="nextClick">下一步</el-button>
        </div>
        <div v-else>
          <el-button @click="prevClick">上一步</el-button>
          <el-button type="primary" @click="addClick">选择</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import MyPackage from '@/views/component/package.vue'
export default {
  components: {
    MyPackage
  },
  data () {
    return {
      CuisineForm: {},
      CuisineData: [],
      addForm: {},
      checkFlag: false,
      packageForm: {},
      step: 'first',
      CuisineAppointTime: [], // 预约时间
      tempType: '',
      rules: {
        models: [
          { required: true, message: '请选择套餐', trigger: 'change' }
        ],
        UserAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      },
      currentPage: 5,
      total: 0,
      pageSize: 5,
      pageNum: 1,
      dialogVisible: false
    }
  },
  mounted () {
    this.getList()
  },
  computed: {
    ...mapState(['CuisineModel', 'userInfo'])
  },
  methods: {
    getList () {
      this.CuisineForm.pageSize = this.pageSize
      this.CuisineForm.pageNum = this.pageNum
      this.CuisineForm.CuisineFlag = false
      this.$api
        .get('/api/Cuisine/list', { params: this.CuisineForm })
        .then(res => {
          this.CuisineData = res.data.data.records
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
          this.$message.error('获取列表失败')
        })
    },
    search () {
      this.pageNum = 1
      this.getList()
    },
    reset () {
      this.pageNum = 1
      this.CuisineForm = {}
      this.getList()
    },
    nextClick () {
      this.step = 'second'
      this.CuisineAppointTime[0] = new Date().getTime();
      // console.log(this.CuisineAppointTime[0]);
      this.CuisineAppointTime[1] =new Date().getTime()+3600*1000*2;

    },
    prevClick () {
      this.step = 'first'
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getList()
    },
    handleCurrentChange (pageNum) {
      this.pageNum = pageNum
      this.getList()
    },
    appointDialog (row) {
      this.tempType = row.models
      this.addForm = row
      this.dialogVisible = true
    },
    packageChange (v) {
      this.packageForm = v
    },
    handleClose () {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.resetClick()
        })
        .catch(_ => {})
    },
    addClick () {
      if (!this.checkFlag) {
        return this.$message.info('请先勾选协议')
      }
      if (this.userInfo.UserAddress) {
        let obj = {
          foodId: this.addForm._id,
          models: this.addForm.models,
          FoodAddress: this.addForm.FoodAddress,//制作的地址
          UserAddress: this.userInfo.UserAddress, //收获人的地址
          packageType: this.packageForm.desc, // 套餐名
          price: this.packageForm.price, // 套餐价格
          number: this.userInfo.number, // 身份证
          name: this.userInfo.name, // 姓名
          telephone: this.userInfo.telephone, // 电话
          CuisineAppointTime: this.CuisineAppointTime, // 预约的时间
          createTime: this.CuisineAppointTime[0], // 订单创建时间
          endTime:this.CuisineAppointTime[1],// 完成时间
          status: 1 // 预约状态变更
        }
        this.$api
          .post(`/api/Food/edit/${obj.foodId}`, { CuisineFlag: true })
          .then(res => {
          })
        this.$api.post(`/api/Food/add`,obj).then(res => {
          this.$message.success('预约成功')
          this.addForm = {}
          this.packageForm = {}
          this.dialogVisible = false
          this.getList()
        })
      } else {
        this.$confirm('您还没有在个人信息中添加地址信息，无法进行预约菜品', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {})
      }
    },
    resetClick () {
      this.dialogVisible = false
    },
    delClick (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api
            .delete(`/api/Food/delete${row._id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.pageNum = 1
              this.getList()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.foodPrice{
float:right;
color: orange;
font-size:20px;
font-weight:600;
}
</style>
